<template>
  <div class="page player">
    <div
      class="cover"
      :style="{ backgroundImage: `url(${song.al.picUrl})` }"
    ></div>
    <div class="cover cover2"></div>
    <header ref="header">
      <i class="iconfont icon-jiantou1" @click="$emit('showPlayer')"></i>
      <div class="info">
        <div class="music-name">{{ song.title }}</div>
        <div class="name">{{ song.ar.slice(0, 6).join("/") }}</div>
      </div>
    </header>
    <!-- 唱片 -->
    <div class="content" @click="showLyric = !showLyric">
      <!-- 棍子 -->
      <div class="stick" :class="[playing ? 'play' : 'paused',showLyric&&'cdshow']">
        <img
          src="http://47.98.159.95:8010/static/media/needle.047d988b.png"
          alt=""
        />
      </div>
      <div class="wrap-img" :class="{ cdshow: showLyric }">
        <img
          class="rotate"
          :class="playing ? 'play' : 'paused'"
          ref="img"
          :src="song.al.picUrl"
        />
        <div class="word">{{ lyrics[currentLyric].word }}</div>
      </div>
      <!-- 歌词 -->
      <lyric v-show="showLyric" ref="lyric"></lyric>
    </div>
    <footer ref="footer">
      <ul class="play-speed">
        <li>倍数听歌</li>
        <li
          v-for="item in playSpeed"
          :key="item"
          :class="{ active: item == speed }"
          @click="$emit('update:speed', item)"
        >
          x{{ item }}
        </li>
      </ul>
      <!-- 进度条 -->
      <div class="progress">
        <span>{{ currentTime | formatTime }}</span>
        <bar-progress />
        <span>{{ duration | formatTime }}</span>
      </div>
      <!-- 播放按钮 -->
      <div class="play-btn">
        <i
          class="iconfont"
          :class="playOrder[playMode]"
          @click="setPlayMode"
        ></i>
        <i
          class="iconfont icon-shangyiqu101"
          @click="$store.commit('player/setCurrentIndex', 'pre')"
        ></i>
        <i
          @click="playClick"
          class="iconfont"
          :class="playing ? 'icon-plus-pause' : 'icon-bofang1'"
        ></i>
        <i
          class="iconfont icon-xiayiqu101"
          @click="$store.commit('player/setCurrentIndex', 'next')"
        ></i>
        <i class="iconfont icon-liebiao" @click="SongPopup = true"></i>
      </div>
    </footer>
    <!-- 底部提示框 -->
    <transition enter-active-class="slideIn" leave-active-class="slideOut">
      <div class="toast" ref="pp" v-show="modeBool">
        {{ textMode }}
      </div>
    </transition>
    <!-- 歌曲列表弹出层 -->
    <transition
      enter-active-class="popupSlideIn"
      leave-active-class="popupSlideOut"
    >
      <songlist-popup v-model="SongPopup" v-show="SongPopup"></songlist-popup>
    </transition>
    <!-- 遮罩层 -->
    <transition
      enter-active-class="popup-fade-in"
      leave-active-class="popup-fade-out"
    >
      <div class="xy-shadow" v-show="SongPopup"></div>
    </transition>
  </div>
</template>
<style lang="scss" scoped>
</style>
<script>
import { mapState, mapGetters } from "vuex";
import ani from "./ani";
import barProgress from "./bar-progress.vue";
import Lyric from "./lyric.vue";
import SonglistPopup from "./songlist-popup.vue";
export default {
  components: { barProgress, Lyric, SonglistPopup },
  mixins: [ani],
  props: ["speed"],
  data() {
    return {
      //播放速度
      playSpeed: [0.75, 1, 1.25, 1.5, 2],
      //播放顺序
      playOrder: ["icon-shunxubofang", "icon-danquxunhuan1", "icon-suiji"],
      showLyric: false,
      textMode: "单曲循环",
      modeBool: false, //播放模式弹出动画
      SongPopup: false, //播放列表弹出层
    };
  },
  computed: {
    ...mapState({
      playing: (state) => state.player.playing,
      playMode: (state) => state.player.playMode,
      currentTime: (state) => state.player.currentTime,
      duration: (state) => state.player.duration,
      lyrics: (state) => state.player.lyrics,
    }),
    ...mapGetters({
      song: "player/currentSong",
      currentLyric: "player/currentLyric",
    }),
  },
  watch: {
    showLyric(newVal) {
      newVal && this.$refs.lyric.lyricScroll(this.currentLyric);
    },
  },
  methods: {
    getImgXY() {
      let x = -document.querySelector(".player").offsetWidth / 2 + 80;
      let y = document.querySelector(".player").offsetHeight / 2;
      let scale = 80 / 400;
      return { x, y, scale };
    },
    playClick() {
      this.$store.commit("player/setPlaying", !this.playing);
    },
    // 修改播放模式
    setPlayMode() {
      this.$store.commit("player/setPlayMode");
      switch (this.playMode) {
        case 0:
          this.textMode = "顺序播放";
          break;
        case 1:
          this.textMode = "单曲循环";
          break;
        case 2:
          this.textMode = "随机播放";
          break;
      }
      this.modeBool = true;
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        this.modeBool = false;
      }, 2000);
    },
  },
  filters: {
    formatTime(val) {
      let m = "0" + ~~(val / 60);
      let s = ("00" + (~~val % 60)).slice(-2);
      return m + ":" + s;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/global-style.scss";
.player {
  z-index: 10001;
  header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(228, 228, 228, 0.1);
    z-index: 11;
    i {
      font-size: 22px;
      transform: rotate(90deg);
      margin-left: 10px;
    }
    .info {
      margin-left: 8px;
      .music-name {
        font-size: 18px;
      }
      .name {
        color: $font-color-desc-v2;
        font-size: 14px;
        margin-top: 5px;
      }
    }
  }
  //唱片
  .content {
    position: absolute;
    top: 60px;
    bottom: 180px;
    left: 0;
    right: 0;
    overflow: hidden;
    // 唱片棍子
    .stick {
      position: absolute;
      left: 46%;
      top: -5vw;
      width: 25vw;
      height: 40vw;
      z-index: 10;
      transform-origin: 4.5vw 4.5vw;
      transition: all .3s;
      img {
        width: 100%;
      }
    }
    .stick.paused {
      transform: rotate(-35deg);
    }
    .stick.play {
      transform: rotate(5deg);
    }

    .wrap-img {
      width: 300px;
      height: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url("http://47.98.159.95:8010/static/media/disc.2a5e9e65.png");
      background-size: contain;
      border-radius: 50%;
      text-align: center;
      img {
        width: 220px;
        height: 220px;
        border-radius: 50%;
        margin: 40px auto;
      }
    }

    .word {
      color: #1ecc94;
      font-size: 16px;
      text-align: center;
      margin-top: 20px;
    }
  }
  footer {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    height: 120px;
    .play-speed {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      li {
        margin: 0 8px;
        color: $font-color-desc-v2;
        font-size: 16px;
      }
      li.active {
        border-radius: 10px;
        border: 1px solid $theme-color;
        padding: 5px;
        color: $theme-color;
      }
    }
    // 进度条
    .progress {
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      color: #333;
      span {
        font-size: 14px;
      }
    }
    .play-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        color: #2e3030;
        margin: 10px 24px 0;
        font-size: 30px;
        &:nth-child(3) {
          font-size: 42px;
        }
      }
    }
  }
}
// 隐藏唱片
.cdshow {
  width: 0 !important;
  overflow: hidden;
}
// 滤镜背景图
.cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
  background-size: cover;
  opacity: 0.7;
  filter: blur(20px);
}
.cover2 {
  filter: none;
  background: rgb(46, 48, 48);
  opacity: 0.5;
}
// 底部提示框
.toast {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 16px;
}
.slideIn {
  animation: slide-in 0.5s;
}
.slideOut {
  animation: slide-out 0.5s;
}
@keyframes slide-in {
  0% {
    bottom: -30px;
  }
  100% {
    bottom: 12px;
  }
}
@keyframes slide-out {
  0% {
    bottom: 12px;
  }
  100% {
    bottom: -30px;
  }
}
</style>
